<template>
  <div class="upload-body">
    <el-dialog v-model="centerDialogVisible" title="付费设置" width="50%" center>
      <div class="setting-title-box" style="padding-top:0;">
        <div class="setting-title">
          <span>文字</span>
        </div>
        <div class="setting-text">免费查看字数%</div>
      </div>
      <!-- 百分比滑块 -->
      <div class="slider-box f-j-sb-a-c">
        <el-slider class="slider" v-model="formData.words_percent" />
        <span>{{ formData.words_percent }}</span>
      </div>

      <div class="setting-title-box">
        <div class="setting-title f-j-sb-a-c">
          <span>附件付费</span>
          <el-radio-group v-model="formData.is_file" class="radio-box">
            <el-radio :label="0">免费</el-radio>
            <el-radio :label="1">付费</el-radio>
          </el-radio-group>
        </div>
      </div>

      <el-input
        class="communityCenter-post-input"
        type="textarea"
        autosize
        v-model="formData.hidden"
        placeholder="请输入您要隐藏的内容~"
      ></el-input>

      <div class="setting-title-box">
        <div class="setting-title f-j-sb-a-c">
          <span>付费价格</span>
          <!-- <el-radio-group v-model="formData.credit_type" class="radio-box">
            <el-radio label="1">余额</el-radio>
            <el-radio label="0">燃油</el-radio>
          </el-radio-group> -->
        </div>
      </div>

      <el-input
        class="price-input"
        type="number"
        v-model="formData.price"
        placeholder="请输入价格"
      ></el-input>

      <template #footer right>
        <span class="dialog-footer flex">
          <div class="close-btn f-j-a-c" @click="close">取消</div>
          <div class="confirm-btn f-j-a-c" @click="confirm">确定</div>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { toFixedNum } from "@/utils/common.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
} from "vue";
export default defineComponent({
  props:{
    setting:{
      type:Object,
      default:()=>{}
    }
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();

    let data = reactive({
      centerDialogVisible: false,
      formData: {
        words_percent: 100, //免费百分比
        is_file: 0, //附件付费  0免费 1付费
        hidden: "", //付费内容
        credit_type: "1", //1余额 0燃油
        price: "", //价格
      },
    });

    // 清空表单
    let clearFormData = ()=>{
      data.formData = {
          words_percent: 100, //免费百分比
          is_file: 0, //附件付费  0免费 1付费
          hidden: "", //付费内容
          credit_type: "1", //1余额 0燃油
          price: "", //价格
        };
    };

    // 打开弹框
    let open = () => {
      data.formData = props.setting;
      data.centerDialogVisible = true;
    };

    // 取消
    let close = () => {
      data.centerDialogVisible = false;
    };

    // 确定
    let confirm = () => {
      emit("confirm",JSON.parse(JSON.stringify(data.formData)));
      close();
    };

    return {
      clearFormData,
      close,
      confirm,
      open,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.upload-body {
  :deep(.el-dialog.el-dialog--center) {
    border-radius: 20px;
    min-width: 600px;
    max-width: 800px;
  }

  :deep(.el-dialog--center .el-dialog__footer) {
    text-align: right !important;
  }
}

// 标题
.setting-title-box {
  padding-top: 30px;
  .setting-title {
    font-size: 14px;
    padding-bottom: 10px;
    > span:first-child {
      color: #000000;
      font-weight: bold;
    }
  }
  .setting-text {
    color: #656f79;
    // padding-top: 10px;
    font-size: 14px;
  }
}

// 百分比滑块
.slider-box {
  padding-top: 6px;
  .slider {
    flex: 1;
    :deep(.el-slider__button-wrapper) {
      top: -17px;
    }
    :deep(.el-slider__runway) {
      height: 2px;
    }
    :deep(.el-slider__bar) {
      height: 2px;
      background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    }
    :deep(.el-slider__button) {
      height: 16px;
      width: 16px;
      background: #ffffff;
      border: none;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    }
  }
  > span {
    font-size: 14px;
    color: #656f79;
    padding-left: 20px;
  }
}

//单选框样式
.radio-box {
  :deep(.el-radio__input.is-checked .el-radio__inner) {
    background: #64c8dc;
    background-color: #64c8dc;
    border-color: #64c8dc;
  }
  :deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #64c8dc;
  }
}

// input-textarea样式
.communityCenter-post-input {
  :deep(.el-textarea__inner) {
    border: none !important;
    background: #f5f6f7;
    border-radius: 10px;
    padding: 10px !important;
    resize: none;
    padding: 0;
    box-shadow: none !important;
    min-height: 80px !important;
    max-height: 480px !important;
    font-size: 14px;
    &::placeholder {
      color: #656f79;
    }
    &:focus {
      box-shadow: 0 0 0 1px #64c8dc inset !important;
    }
  }
}

// input样式
.price-input {
  position: relative;

  &::before {
    width: 60px;
    height: 38px;
    content: "￥";
    position: absolute;
    left: 0;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: #000000;
    border-right: 1.5px solid #dcdfe6;
    top: 1px;
  }

  :deep(.el-input__wrapper) {
    border-radius: 10px;
    background: transparent;
    height: 40px;
    padding-left: 70px;
  }
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #64c8dc inset;
  }
}

// 底部按钮
.dialog-footer {
  font-size: 14px;
  font-weight: bold;
  justify-content: flex-end;
  > div {
    height: 36px;
    width: 80px;
    border-radius: 10px;
    margin-left: 10px;
    cursor: pointer;
    background: #f3f4f5;
    color: #656f79;
    &:active {
      opacity: 0.7;
    }
  }
  .confirm-btn {
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    color: #ffffff;
  }
}
</style>
